<template>
    <div>
        <h3>会员列表</h3>
        <input type="button" value="会员增加" class="btn btn-priamry" @click="add"/>
        <hr/>
        <div>
            会员等级:<select v-model="queryInfo.LeveLId">
                <option value="">请选择</option>
                <option :value="item.Id" v-for="item in LeveList">{{ item.LevelName }}</option>
            </select>
            会员名称:<input type="text" v-model="queryInfo.userName"/>
            会员编号:<input type="text" v-model="queryInfo.userCode"/>
            会员手机号:<input type="text" v-model="queryInfo.phone"/>
            会员身份证号:<input type="text" v-model="queryInfo.code"/>
            <input type="button" value="查询" class="btn btn-success" @click="getList"/>
            <input type="button" value="批量删除" class="btn btn-success" />
            <input type="button" value="批量启用" class="btn btn-success" />
            <input type="button" value="批量禁用" class="btn btn-success" />
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll"/>
                    </td>
                    <td>Id</td>
                    <td>会员编号</td>
                    <td>会员姓名</td>
                    <td>手机号</td>
                    <td>身份证号码</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>等级</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.List" :key="item.Id">
                    <td>
                        <input type="checkbox" :value="item.id" v-model="ids"/>
                    </td>
                    <td>{{item.Id}}</td>
                    <td>{{ item.UserCode }}</td>
                    <td>{{ item.UserCode }}</td>
                    <td>{{ item.Phone.substring(0,3)+'***'+item.Phone.substring(7)}}</td>
                    <td>{{ item.Code }}</td>
                    <td>{{ item.Sex==1?'男':'女' }}</td>
                    <td>{{ item.State==1?'启用':'禁用' }}</td>
                    <td>{{ item.JiFen.toFixed(2) }}</td>
                    <td>￥{{ item.Money.toFixed(2)  }}</td>
                    <td>
                        {{ item.UserName }}
                    </td>
                    <td>{{ item.UpdateTime.substring(0,10) }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-danger" @click="upd(item.Id)"/>
                        <input type="button" value="删除" class="btn btn-success" @click="del(item.Id)"/>
                         <input type="button" v-if="item.State==0" value="启用" class="btn btn-success" @click="update(item.id,0)"/>
                        <input type="button" v-else value="禁用" class="btn btn-success" @click="update(item.id,1)"/>
                </td>
                </tr>
            </tbody>
        </table>
        <span>总{{ data.totalCount }} 条</span>
        <span>总{{ data.totalPage }} 页</span>
        <span>当前{{ queryInfo.pageindex }}/{{ data.totalPage }}</span>
        <input type="button" value="首页" @click="goPage(1)" />
        <input type="button" value="上一页" @click="goPage(queryInfo.pageindex-1)"/>
        <input type="button" value="下一页" @click="goPage(queryInfo.pageindex+1)"/>
        <input type="button" value="尾页" @click="goPage(data.totalPage)"/>
        <input type="number" v-model="queryInfo.pageindex">
        <input type="button" value="跳转" @click="goPage(queryInfo.pageindex)"/>
        <select v-model="queryInfo.pageSize" @click="show">
            <option v-for="item in arr" :key="item">每页 {{ item }}
            </option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted,reactive,ref } from 'vue';
import moment from 'moment';
import axios from 'axios';
const router=useRouter();
//向后端传递的参数
let queryInfo=reactive({
    LeveLId:'',
    userName:'',
    userCode:'',
    phone:'',
    code:'',
    pageindex:1,
    pageSize:2
})

//接收后端返回的数据（显示）
let data:any=reactive({
    List:[],
    totalCount:0,
    totalPage:0,
})
let arr=ref([2,4,6,8])
const add=()=>{
    router.push("/userAdd");
}
const getList=()=>{
    axios({
        url:'/api/ZMember/GetZUserModels',
        method:'get',
        params:queryInfo,
    })
    .then((res)=>{
        console.log(res);
        data.List=res.data.List;
        data.totalCount=res.data.totalCount;
        data.totalPage=res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
onMounted(()=>{
    getList();
})
///下拉框
let LeveList:any=ref([]);
onMounted(() => {
    getList();
    getLeveList();
});


const goPage=(num:any)=>{
    if(num<1){
        queryInfo.pageindex=1;
        return;
    }
    if(num>data.totalPage){
        queryInfo.pageindex=data.totalPage;
        return;
    }
    getList();
}

const getLeveList = () => {
    axios({
        url: 'https://localhost:7035/api/ZMember',
        method: 'get',

    })
    .then((res)=>{
        console.log(res);
        LeveList.value=res.data;
     
    })
    .catch((err)=>{
        console.log(err);
    });
}
//删除
const del=(id:any)=>{
    //1.友好提示
    var f=confirm("确认要删除吗?");
    if(f){
        axios({
            url:'/api/ZMember/DelUserItem',
            method:'delete',
            params:{
                id:id
            },
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功!");
                getList();
            }
            else{
                alert("删除失败!");
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
    else{
        alert("删除失败!")
    }
    //2.删除
}
//点击修改
const upd=(id:any)=>{
    //1.跳转并且传参 router.push("");  router.push{("")};
    router.push({
        path:'/userUpdate',
        query:{
            id:id,
        }
    });
}
const show=()=>{
    queryInfo.pageindex=1;
    getList();
}

const update=(id:any,State:any)=>{
   let obj={
    id:id,
    State:State
   };
   axios({
    url:'/api/ZMember/UpdateUserState',
    method:'put',
    params:{
        id:id,
        State:State
    }
   })
   .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("成功1");
            getList();
        }
     
    })
    .catch((err)=>{
        console.log(err);
    });
}

//控制单个复选框选中的
let checked=ref(false);
let ids=ref(true);
const checkAll=()=>{
    // if(checked.value==true){
    //     checked.value=false;
    // }
    // else{
    //     checked.value=true;
    // }
  
}

</script>

<style scoped>

</style>